<!--
 * @Description: 发货弹窗
 * @Author: py
 * @Date: 2024-08-08
-->
<script setup lang='ts' name="shipments-dialog">
import type { FieldValues, PlusColumn } from 'plus-pro-components'

import { shippingApi } from '@fl/api/city-service'
import { SubmitBtn } from '@fl/components'

const props = withDefaults(defineProps<{
    data?: any
    orderLineId?: number
}>(), {
    data: () => {},
    orderLineId: 0,
})

const emits = defineEmits(['success'])

const formRef = ref()
const visible = defineModel<boolean>('visible', { required: true })
const { data: rowData, orderLineId } = toRefs(props)

const initialState = {
    // companyId: '',
    orderTrackingNumber: '',
}
const formValues = ref<FieldValues>({
    orderCode: rowData.value.orderCode,
    ...initialState,
})

// watchEffect(() => {
//     if (data.value) {
//         formValues.value = { ...data.value }
//     }
// })

const curChildInfos = computed(() => {
    return rowData.value.skuOrderList.find((item: any) => item.orderLineId === orderLineId.value)
})

// const expressCompanys = [
//     {
//         label: '顺丰',
//         value: '1',
//     },
//     {
//         label: '京东',
//         value: '2',
//     },
//     {
//         label: '中通',
//         value: '3',
//     },
//     {
//         label: '申通',
//         value: '4',
//     },
//     {
//         label: '圆通',
//         value: '5',
//     },
//     {
//         label: '韵达',
//         value: '5',
//     },
// ]

const columns: PlusColumn[] = [
    {
        label: '订单编号',
        prop: 'orderCode',
        valueType: 'text',
    },
    {
        label: '商品名称',
        prop: 'skuOrderList',
        // 自定义表单项
        renderField: () => curChildInfos.value.skuName,
        valueType: 'text',
    },
    // {
    //     fieldProps: {
    //         filterable: true,
    //         placeholder: '请输入快递品牌',
    //     },
    //     label: '快递品牌',
    //     options: expressCompanys,
    //     prop: 'companyId',
    //     valueType: 'select',
    // },
    {
        fieldProps: {
            placeholder: '请输入快递单号',
        },
        label: '单号',
        prop: 'orderTrackingNumber',
    },
]

const rules = {
    // companyId: [{ message: '请输入快递品牌', required: true, trigger: 'blur' }],
    orderTrackingNumber: [{ message: '请输入快递单号', required: true, trigger: 'blur' }],
}

async function handleAllConfirm(handleValidate: () => Promise<boolean>) {
    const isPass = await handleValidate()
    if (isPass) {
        // formRef.value.handleConfirm()

        const {
            // companyId,
            orderTrackingNumber,
        } = formValues.value
        // const companyName = expressCompanys.find((item: any) => item.value === companyId)?.label ?? ''
        const {
            id,
            orderCode,
        } = rowData.value
        const {
            orderLineId,
            skuId,
            skuName,
        } = curChildInfos.value
        const oParams = {
            // companyId, // 快递公司id
            // companyName, // 快递公司名称
            orderCode, // 订单编号
            orderId: id, // 订单id
            orderLineId, // 商品订单id
            orderTrackingNumber, // 运单号
            skuId, // 订单编号
            skuName, // 商品规格名称
        }
        // console.log(oParams)

        shippingApi(oParams).then(() => {
            visible.value = false
            ElMessage.success('发货成功')
            emits('success')
        })
    }
}

// function onConfirm(values: FieldValues) {
//     console.log('🚀 ~ confirm ~ confirm:', values)
//     visible.value = false
//     emits('success')
// }
</script>

<template>
    <PlusDialogForm ref="formRef"
                    v-model:visible="visible"
                    v-model="formValues"
                    :dialog="{
                        width: '500',
                        title: '确认发货',
                        hasFooter: false,
                    }"
                    :form="{
                        labelWidth: 100,
                        labelPosition: 'right',
                        hasFooter: true,
                        footerAlign: 'center',
                        columns,
                        rules,
                        hasErrorTip: false,
                    }"
    >
        <!-- @confirm="onConfirm" -->
        <template #form-footer="{ handleSubmit }">
            <SubmitBtn type="primary"
                       class="mt5"
                       @click="handleAllConfirm(handleSubmit)"
            >
                确认发货
            </SubmitBtn>
        </template>
    </PlusDialogForm>
</template>
